<template>
  <qx-table :dbRowClick="rowDblClick" :option="tableOption" :remoteData="remoteData" :rowCls="rowCls">
    <template v-if="!taskCode" v-slot:top>
      <qx-form v-model="searchForm" :option="tableOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:menuLeft="{ selected = [] }">
      <q-btn :disable="!selected.length" outline text-color="primary" unelevated @click="handleResend(selected[0])">
        {{ $t('TaskCore.ResendNotification') }}
      </q-btn>
      <q-btn outline text-color="primary" unelevated @click="handleManual">
        {{ $t('TaskCore.ManualTrigger') }}
      </q-btn>
    </template>
    <template v-slot:menuLeftR>
      <q-icon color="warning" name="mdi-map-marker-question cursor-pointer cursor-hover" size="1.5rem">
        <q-tooltip class="q-pa-md" v-bind="$tooltipAttr">{{ $t('Misc.DblClickTips') }}</q-tooltip>
      </q-icon>
    </template>
    <template v-slot:notifyRetryCnt="{ row }">
      <QLink @click="handleRetry(row)">{{ row.notifyRetryCnt }}</QLink>
    </template>
  </qx-table>
  <q-modal v-model="modalVisible" :header="`${$t('Misc.SpecifyDetails', { name: $t('TaskCore.TaskNotification') })}`"
           :menuBtn="false" :persistent="false" width="620">
    <QInfo :columns="tableOption.column || []" :rowInfo="rowInfo" cols="2">
      <template v-slot:notifyRetryCnt="{ row }">
        <QLink @click="handleRetry(row)">{{ row.notifyRetryCnt }}</QLink>
      </template>
    </QInfo>
  </q-modal>
  <q-modal v-model="manualVisible" :header="`${$t('TaskCore.ManualTrigger')}`" width="500" @beforeClose="beforeClose"
           @confirm="submitForm">
    <qx-form ref="FormRef" v-model="formInfo" :option="manualOption"></qx-form>
  </q-modal>
</template>
<script setup>
import { i18n } from 'boot/i18n.js'
import { postAPI } from 'src/api/index.js'
import { yesOrNo } from 'src/enum/index.js'
import { createDialog } from 'src/utils/utils.js'
import { notificationStatus, notificationTargetTypes, sitePositionTypes } from 'src/views/TaskCore/enum.js'
import { computed, onMounted, ref } from 'vue'

const props = defineProps({ taskCode: String })

const rowInfo = ref({})
const FormRef = ref(null)
const formInfo = ref({})
const searchForm = ref({})
const modalVisible = ref(false)
const manualVisible = ref(false)
const remoteData = ref({ dicUrl: '/yfagv/api/execL3TaskNotify/list' })
const tableOption = computed(() => {
  return {
    span: 22, export: true, labelWidth: 80, searchSpan: 5, maxHeight: 'inherit', selection: 'single',
    column: [{
      label: `${i18n.t('TaskCore.NotificationCode')}`, field: 'notifyReqCode', minWidth: 80
    }, {
      label: `${i18n.t('TaskCore.NotificationTime')}`, field: 'notifyReqTime', minWidth: 80, search: false
    }, {
      label: `${i18n.t('TaskCore.TaskCode')}`, field: 'parentTaskCode', minWidth: 80, search: false
    }, {
      label: `${i18n.t('TaskCore.SubTaskCode')}`, field: 'taskCode', minWidth: 80
    }, {
      label: `${i18n.t('TaskCore.NotificationStatus')}`, field: 'notifyStatus', type: 'select',
      options: notificationStatus.value, minWidth: 80, useTag: true
    }, {
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'execRobotCode', minWidth: 80, search: false
    }, {
      label: `${i18n.t('CarrierCore.RackCode')}`, field: 'execShelvesCode', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('MapCore.CurrentStation')}`, field: 'positionCode', minWidth: 80, search: false
    }, {
      label: `${i18n.t('MapCore.StationPositionType')}`, field: 'positionType', options: sitePositionTypes.value,
      minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('TaskCore.ManualTrigger')}`, field: 'isManualTrigger', options: yesOrNo.value, useTag: true,
      minWidth: 80, search: false
    }, {
      label: `${i18n.t('TaskCore.NotificationType')}`, field: 'notifyMethodType', minWidth: 80, search: false,
      hide: true
    }, {
      label: `${i18n.t('TaskCore.NotificationTarget')}`, field: 'notifyTarget', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('TaskCore.NotificationTargetType')}`, field: 'notifyTargetType',
      options: notificationTargetTypes.value, minWidth: 80, search: false
    }, {
      label: `${i18n.t('Misc.RetryCount')}`, field: 'notifyRetryCnt', minWidth: 80, search: false,
      defaultValue: '0', slot: true
    }, {
      label: `${i18n.t('StartTime')}`, field: 'notifyStartTime', minWidth: 80, search: false
    }, {
      label: `${i18n.t('EndTime')}`, field: 'notifyEndTime', minWidth: 80, search: false
    }, {
      label: `${i18n.t('Misc.ExceptionReason')}`, field: 'notifyExceptionMsg', minWidth: 80, search: false
    }, {
      label: `${i18n.t('TaskCore.TaskSource')}`, field: 'appId', minWidth: 80, search: false, hide: true
    }, {
      label: `${i18n.t('Remarks')}`, field: 'remark', minWidth: 80, search: false
    }]
  }
})
const manualOption = computed(() => {
  return {
    span: 22,
    column: [{
      label: `${i18n.t('TaskCore.TaskCode')}`, field: 'taskCode', required: true
    }, {
      label: `${i18n.t('TaskCore.NotificationType')}`, field: 'method', required: true
    }, {
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'robotCode'
    }, {
      label: `${i18n.t('CarrierCore.RackCode')}`, field: 'podCode'
    }, {
      label: `${i18n.t('MapCore.CurrentStation')}`, field: 'currentPositionCode'
    }, {
      label: `${i18n.t('MapCore.GroundCodeType')}`, field: 'mapDataCode'
    }, {
      label: `${i18n.t('Misc.CustomValue')}`, field: 'data'
    }, {
      label: `${i18n.t('Remarks')}`, field: 'remark', type: 'textarea', maxlength: 200, rows: 3
    }]
  }
})

const rowCls = ({ row }) => row.notifyStatus === '3' ? 'text-red-4' : ''
const rowDblClick = row => {
  rowInfo.value = row
  modalVisible.value = true
}
const handleResend = ({ id: notifyRecordId }) => {
  createDialog({ msg: `${i18n.t('TaskCore.ResendNotificationTips')}` }, () => {
    postAPI('/yfagv/api/mockTaskCallback/mockTaskReCallback', { notifyRecordId }, () => startSearch())
  }, () => {})
}
const handleManual = () => {
  formInfo.value = { isManualTrigger: '1' }
  manualVisible.value = true
}
const handleRetry = row => {
  createDialog({ msg: `${i18n.t('Misc.RetryCountTips')}` }, () => {
    postAPI('/yfagv/api/execL3TaskNotify/retry', row, () => startSearch())
  }, () => {})
}
const formatSearchForm = () => {
  const params = { ...searchForm.value }
  if (props.taskCode) params.taskCode = props.taskCode
  if (searchForm.value.createdTime?.from) {
    params.createdStartTime = params.createdTime?.from
    params.createdEndTime = params.createdTime?.to
    delete params.createdTime
  }
  return { ...params }
}
const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
}
const beforeClose = () => {
  if (FormRef.value) FormRef.value.onReset()
  manualVisible.value = false
}
const submitForm = mDone => {
  FormRef.value.validate((form, done) => {
    postAPI('/yfagv/api/mockTaskCallback/mockTaskCallback', form, () => {
      startSearch()
      done()
      mDone && mDone()
    }, () => {
      done()
      mDone && mDone(false)
    })
  }, () => mDone && mDone(false))
}

onMounted(startSearch)
</script>